<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<body>
    <div class="think-box-shadow">

        <ul id="zTree" class="ztree notselect"></ul>

        <div class="hr-line-dashed"></div>
        <div class="layui-form-item text-center">
            <button class="layui-btn" data-submit-role type='button'>保存数据</button>
            <button class="layui-btn layui-btn-danger" type='button' onclick="window.history.back()">取消编辑</button>
        </div>
    </div>


    <script th:inline="javascript">
        require(['jquery.ztree'], function () {
            new function () {
                var that = this;
                this.data = {}, this.ztree = null, this.setting = {
                    view: {showLine: false, showIcon: false, dblClickExpand: false},
                    check: {enable: true, nocheck: false, chkboxType: {"Y": "ps", "N": "ps"}}, callback: {
                        beforeClick: function (id, node) {
                            node.children.length < 1 ? that.ztree.checkNode(node, !node.checked, null, true) : that.ztree.expandNode(node);
                            return false;
                        }
                    }
                };
                this.renderChildren = function (list, level) {
                    var childrens = [];
                    for (var i in list) childrens.push({
                        open: true, node: list[i].id, name: list[i].title || list[i].id,
                        checked: list[i].remark === "auth:true" || false, children: this.renderChildren(list[i].sub, level + 1)
                    });
                    return childrens;
                };
                this.getData = function () {
                    var menus = $.utils.arr2tree([[${menus}]])
                    console.log("data", menus)
                    that.data = that.renderChildren(menus)
                    that.showTree()
                };
                this.showTree = function () {
                    this.ztree = $.fn.zTree.init($("#zTree"), this.setting, this.data);
                };
                this.submit = function () {
                    var nodes = [], data = this.ztree.getCheckedNodes(true);
                    for (var i in data) if (data[i].node) nodes.push(data[i].node);

                    console.log("submit", nodes)

                    $.form.load('/system/role/auth', {id: [[${vo.id}]], authId: nodes.join(',')}, 'post');

                };
                // 刷新数据
                this.getData();
                // 提交表单
                $('[data-submit-role]').on('click', function () {
                    that.submit();
                });
            };
        });
    </script>
    <style>
        ul.ztree li {
            white-space: normal !important;
        }

        ul.ztree li span.button.switch {
            margin-right: 5px;
        }

        ul.ztree ul ul li {
            display: inline-block;
            white-space: normal;
        }

        ul.ztree > li {
            padding: 15px 25px 15px 15px;
        }

        ul.ztree > li > ul {
            margin-top: 12px;
            border-top: 1px solid rgba(0, 0, 0, .1);
        }

        ul.ztree > li > ul > li {
            padding: 5px;
        }

        ul.ztree > li > a > span {
            font-weight: 700;
            font-size: 15px;
        }

        ul.ztree .level2 .button.level2 {
            background: 0 0;
        }
    </style>

</body>
</html>